<template>
  <div class="bi-operate-log">
    <div class="bi-operate-log__head" v-if="showTitle">
      <strong class="bi-operate-log__title">日志</strong>
    </div>
    <div class="bi-operate-log__body">
      <div class="bi-operate-log__list" v-if="data && data.length">
        <div
          class="bi-operate-log__item"
          v-for="(item, index) in data"
          :key="index"
        >
          <span class="bi-operate-log__user">{{item.name}}</span>
          <span class="bi-operate-log__date">{{item.date}}</span>
          <div class="bi-operate-log__content">{{item.content}}</div>
        </div>
      </div>
      <div class="bi-operate-log__form" v-if="editable">
        <div class="bi-operate-log__form-user">
          <bi-user-avatar :src="userAvatar" size="medium"></bi-user-avatar>
        </div>
        <div class="bi-operate-log__form-main">
          <div class="bi-operate-log__form-input">
            <ui-textarea v-model="inputComment" placeholder="填写评论"></ui-textarea>
          </div>
          <div class="bi-operate-log__form-toolbar">
            <ui-button type="primary" :click="handleConfirmClick">保存</ui-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UiTextarea from '../textarea'
import BiUserAvatar from '../user-avatar'
import Message from '../message'

export default {
  name: 'BiOperateLog',
  components: {
    UiTextarea,
    BiUserAvatar
  },
  props: {
    data: {
      type: Array
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    userAvatar: {
      type: String
    },
    userName: {
      type: String
    },
    editable: {
      type: Boolean,
      default: true
    },
    sendCommentMethod: {
      type: Function
    }
  },
  data() {
    return {
      inputComment: ''
    }
  },
  methods: {
    handleConfirmClick() {
      if (!this.inputComment) {
        Message.error('评论内容不能为空')
        return
      }
      if (!this.sendCommentMethod) {
        return
      }
      return this.sendCommentMethod({
        content: this.inputComment
      }).then(() => {
        this.inputComment = ''
      })
    }
  }
}
</script>
<style lang="less">
.bi-operate-log__head{
  height: 32px;
  line-height: 32px;
  margin-bottom: 3px;
}
.bi-operate-log__title{
  font-size: 18px;
}
.bi-operate-log__item{
  line-height: 1.7em;
  padding: 3px 0 0 18px;
  position: relative;
  &:before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #D5D8DC;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    left: 0;
  }
  &:not(:last-child) {
    padding-bottom: 12px;
    &:after {
      content: '';
      position: absolute;
      top: 10px;
      bottom: -10px;
      left: 4px;
      width: 1px;
      background-color: #D5D8DC;
    }
  }
}
.bi-operate-log__content{
  white-space: pre-wrap;
}
.bi-operate-log__user{
  margin-right: 6px;
}
.bi-operate-log__date{
  color: #999;
  margin-left: 6px;
}
.bi-operate-log__form{
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
.bi-operate-log__form-user{
  margin-right: 12px;
}
.bi-operate-log__form-main{
  flex: 1;
}
.bi-operate-log__form-input{
  margin-bottom: 16px;
}
</style>
